<template>
    <view class="vote-page">
        <!-- 创建投票标题栏 -->
        <view class="title-bar">
            <text class="icon-back" @click="goBack"></text>
            <text class="title">创建投票</text>
            <view class="more-options">
                <text class="icon-dots"></text>
                <text class="icon-camera"></text>
            </view>
        </view>

        <!-- 投票活动名称设置 -->
        <view class="activity-name-setting">
            投票名称:<input type="text" placeholder="点击设置投票活动名称" v-model="voteFrom.voteTitle" />
        </view>

        <!-- 投票活动类型设置 -->
        <view class="activity-type-setting">
            投票类型:<input type="text" placeholder="点击设置投票活动类型" v-model="voteFrom.voteType" />
        </view>

        <view class="activity-name-setting"><!-- 0 -->
            场外投票次数:<input type="text" placeholder="输入场外投票次数" v-model="voteFrom.userVote1" />
        </view>

        <view class="activity-type-setting"><!-- 1 -->
            场内投票次数:<input type="text" placeholder="输入场内投票次数" v-model="voteFrom.userVote2" />
        </view>

        <!-- 封面设置 -->
        <view class="cover-setting">
            <image :src="coverImage" mode="aspectFit" />
            <button @click="setCover">封面设置</button>
        </view>

        <!-- 投票活动介绍 -->
        <view class="activity-intro">
            <text>投票活动介绍:</text>
            <textarea placeholder="投票活动介绍" v-model="voteFrom.description"></textarea>
        </view>

        <!-- 下一步按钮 -->
        <button class="next-step" @click="finishCreate">完成创建</button>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { getVoteList, insertVote } from '@/api/vote.js';

const router = useRouter();

// 模拟数据
const startTime = ref('2025-06-12');
const endTime = ref('2025-06-18');
const voteRule = ref('投票者每天可投5票');
const isMultiVote = ref(false);
const isAnnouncement = ref(false);
const isShowOrganizer = ref(true);
const detailDisplayModes = ref(['显示头像模式', '其他模式']);
const detailDisplayModeIndex = ref(0);
const contestantDisplayModes = ref(['网格:图片统一尺寸', '列表模式']);
const contestantDisplayModeIndex = ref(0);

const voteFrom = ref({
    'voteTitle': '',
    "voteStatus": '未开始',
    'userType1': '0',
    'userType2': '1',
    'userVote1': '',
    'userVote2': '',
    'voteType': '',
    'description': '',
    "voteImage": ""
});

// 定义封面图片路径
const coverImage = ref('');

// 模拟方法
const goBack = () => {
    console.log('go back');
};

const setCover = async () => {
    // 原方法代码保持不变
};

const finishCreate = async () => {
    const res = await insertVote(voteFrom.value);
    console.log(voteFrom.value);
    // 触发自定义事件
    uni.$emit('voteCreated'); 
    uni.switchTab({ url: '/pages/myVote/myVote' });
};

const setPageCopy = () => {
    console.log('set page copy');
};

const showDetailDemo = () => {
    console.log('show detail demo');
};

const showContestantDemo = () => {
    console.log('show contestant demo');
};

const nextStep = () => {
    console.log('next step');
};

// 处理数据变更的方法
const onVoteRuleInput = (e) => {
    voteRule.value = e.detail.value;
};

const onMultiVoteChange = (e) => {
    isMultiVote.value = e.detail.value;
};

const onAnnouncementChange = (e) => {
    isAnnouncement.value = e.detail.value;
};

const onShowOrganizerChange = (e) => {
    isShowOrganizer.value = e.detail.value;
};

const onDetailDisplayModeChange = (e) => {
    detailDisplayModeIndex.value = e.detail.value;
};

const onContestantDisplayModeChange = (e) => {
    contestantDisplayModeIndex.value = e.detail.value;
};

const addLink = () => {
    console.log('add link');
};
</script>

<style scoped>
/* 样式部分保持不变 */
.vote-page {
    background-color: #f0f5ff;
    padding: 10px;
    font-family: Arial, sans-serif;
}

.title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #007aff;
    color: white;
    padding: 10px;
    margin-bottom: 10px;
}

.title {
    font-size: 18px;
    font-weight: bold;
}

.more-options {
    display: flex;
}

.icon-back,
.icon-dots,
.icon-camera {
    font-size: 20px;
    margin-right: 10px;
}

.template-setting,
.activity-name-setting,
.activity-type-setting,
.cover-setting,
.activity-intro,
.advanced-setting,
.vote-time-rule,
.organizer-info,
.registration-group-setting,
.page-copy-setting,
.detail-display-setting,
.contestant-display-setting,
.interactivity-setting,
.additional-setting,
.marketing-page-setting,
.official-account-setting,
.clear-test-data,
.reset-number,
.data-screen,
.pc-sync-management {
    margin-bottom: 15px;
}

.template-setting,
.advanced-setting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.change-template,
.edit-intro,
.set,
.demo,
.note {
    color: #007aff;
    cursor: pointer;
}

.activity-name-setting input,
.activity-type-setting input,
.activity-intro textarea {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.cover-setting image {
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}

.cover-setting button {
    background-color: #ccc;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.vote-time-rule view,
.organizer-info {
    margin-bottom: 10px;
}

.vote-time-rule text {
    display: block;
    margin-bottom: 5px;
}

.vote-time-rule picker {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.multi-vote-setting,
.announcement-setting {
    display: flex;
    align-items: center;
}

.multi-vote-setting switch,
.announcement-setting switch {
    margin-right: 5px;
}

.organizer-info input,
.registration-group-setting picker,
.detail-display-setting picker,
.contestant-display-setting picker {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.organizer-info button,
.pc-sync-management button {
    background-color: #66f;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

.next-step {
    display: block;
    width: 100%;
    background-color: #007aff;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
}
</style>